<template>
  <div>
    <HomeTop></HomeTop>
    <div>
      <div class="ok-page-width">
        <div>
          <el-image style="width: 100%;height: 260px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/product.jpg')"></el-image>
        </div>
        <div class="line-20"></div>
        <div class="ok-box-flex">
          <div class="ok-width-max">
            <div class="ok-page-main">
              <div class="">
                <div class="ok-park-info-title" style="position: relative">
                  <el-page-header @back="goBack" content="详情">
                  </el-page-header>
                  <el-button @click="formVisible=true" style="position: absolute;top:10px;right: 10px;" plain type="primary">订购</el-button>
                </div>
                <div class="ok-info20" style="width: 1100px;">
                  <div style="display: flex;flex-direction: row">
                    <div class="ok-box-left">
                      <el-image :src="ok.tool.getImg(productInfo.image)" style="width: 300px; height: 300px;margin-top: 20px;border-radius: 5px;"></el-image>
                    </div>
                    <div class="">
                      <div style="margin-top: 20px;margin-left: 30px">
                        <p style="line-height: 36px;font-size: 36px">
                          {{productInfo.title}}
                        </p>
                        <div class="line-20"></div>
                        价格：<span style="font-size: 30px;color: red;margin-left: 10px">{{productInfo.price}}元/{{productInfo.unit}}</span>
                        <div class="line-20"></div>
                        地址：<span style="font-size: 20px;margin-left: 10px">{{productInfo.address}}</span>
                        <div class="line-20"></div>
                        描述：<span style="font-size: 20px;margin-left: 10px;line-height: 40px">{{productInfo.intro}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="ok-info20" style="height: 180px;background-color: #FFFFFF;margin-top: 30px;">
                  <div style="padding-top: 20px">
                  <span style="color: #0092FF;font-size: 16px;font-weight: bold;padding-top: 15px;height: 25px;line-height: 25px;padding-left: 31px">
                    免责声明
                  </span>
                    <p style="color: #666666;line-height: 28px;font-size: 13px;padding-top: 25px;padding-left: 31px">
                      1、平台发布此信息目的在于传播更多信息，与本网站立场无关。<br>
                      2、平台不保证该信息（包括但不限于文字、数据及图表）全部或者部分内容的准确性、真实性、完整性、有效性、
                      及时性、原创性等。<br>
                      3、相关信息并未经过本网站证实，不对您构成任何投资建议，据此操作，风险自担。<br>
                      <br>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="ok-box-left" style="width: 200px;margin-left: 20px;flex-direction: column;">
            <div style="width: 100%">
              <div style="height: 300px">
                <el-image :src="require('@/static/images/image01.jpg')" style="width: 100%;height: 100%;"></el-image>
              </div>
            </div>
            <div class="line-15"></div>
            <div style="width: 100%">
              <div style="height: 300px">
                <el-image :src="require('@/static/images/image04.png')" style="width: 100%;height: 100%;"></el-image>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
    <div class="line-20"></div>
    <HomeFoot></HomeFoot>
    <div>
      <el-dialog :title="title" :visible.sync="formVisible" width="50%" @close="closeDialog">
        <div style="" >
          <el-form :model="formData" :rules="formDataRules" ref="form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="联系人：" prop="contacts">
              <div class="ok-box-left">
                <el-input v-model="formData.contacts" style="width: 50%;"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="联系电话：" prop="phone">
              <div class="ok-box-left">
                <el-input v-model="formData.phone" style="width: 50%;">
                </el-input>
              </div>
            </el-form-item>
            <el-form-item label="订购数量" prop="buyNumber">
              <div class="ok-box-left">
                <el-input v-model="formData.buyNumber" style="width: 50%;">
                  <template slot="append">{{formData.unit}}</template>
                </el-input>
              </div>

            </el-form-item>
            <el-form-item label="描述" prop="intro">
              <el-input type="textarea" :rows="3" v-model="formData.intro"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="ok-box-center">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" class="title" @click="submitForm">提交</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>

import {defineComponent} from "vue";
import HomeTop from "@/components/HomeTop.vue";
import ok from "@/assets/ok";
import api from "@/api/publicApi"
import HomeFoot from "@/components/HomeFoot.vue";

export default defineComponent({
  computed: {
    ok() {
      return ok
    }
  },
  components: {HomeFoot, HomeTop},
  data(){
    return{
      title:"订购单",
      formVisible:false,
      productInfo:{},
      formData:{
        productId:"",
        userId:"",
        contacts:"",
        phone:"",
        productTitle:"",
        buyNumber:0,
        price:0,
        unit:"",
        intro:"",
      },
      formDataRules:{
        contacts:  [
          { required: true, message: '请输联系人', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
        ],
        buyNumber: [
          { required: true, message: '请输入订购数量', trigger: 'blur' }
        ],
        intro: [
          { required: true, message: '请输入备注', trigger: 'blur' },
        ]
      },
    }
  },
  mounted() {
    this.init();
    api.getSale();
  },
  methods:{
    init(){
      api.getProduct({id:this.$route.query.id}).then(res =>{
        this.productInfo = res.result;
        this.formData.unit = this.productInfo.unit;
        this.formData.productId = this.productInfo.id;
        this.formData.price = this.productInfo.price;
        this.formData.userId = this.productInfo.userId;
        this.formData.productTitle = this.productInfo.title
      })
    },
    goBack() {
      history.go(-1);
    },
    closeDialog(){
      this.formVisible = false;
    },
    submitForm(){
      let data = {...this.formData}

      this.$refs.form.validate((valid)=>{
        if (valid){
          this.$confirm('是否保存', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            api.createProductOrder(data).then(res =>{
              if (res){
                this.$message({
                  message:"提交成功!",
                  type:"success"
                });
                this.closeDialog();
              }

            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
      })
    }
  }
})
</script>
<style>

</style>
